<template>
    <div class="map_action">
        <h2>action的辅助函数</h2>
        <button @click="changenameAction('嘉然')">修改nameAction</button>
        <button @click="increateAction">修改counterAction</button>
        <h2>action中的name:{{ $store.state.nameAction }}</h2>
        <h2>action中的counter:{{ $store.state.counterAction }}</h2>
    </div>
</template>
<script>
import { mapActions } from 'vuex';
export default {
    methods: {
        // ...mapActions(["increateAction", "changenameAction"])
    }
}
</script>
<script setup>
import { useStore, mapActions } from "vuex"
// 方法一、用辅助函数手动封装
const store = useStore()
const actions = mapActions(["increateAction", "changenameAction"])
const newActions = {}
Object.keys(actions).forEach(key => {
    // 解构
    newActions[key] = actions[key].bind({ $store: store })
})
const { increateAction, changenameAction } = newActions
// 方法二、默认写个函数
// function increateAction() {
//     store.dispatch("increateAction")
// }
</script>
<style scoped lang="less"></style>